import React from "react";
import { Route, Routes, Link, HashRouter } from 'react-router-dom'
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import './global.css'
import TodoList from "./components/TodoList";
import UserInfo from "./components/UserInfo";
import UserMedia from "./components/UserMedia";

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;


function App() {
  return (
    <div className="App">
      <HashRouter>

        <Layout>
          <Header className="header">
            <div className="logo" />

            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
              <Menu.Item key="1">
                <Link to="user">用户信息数据</Link>
              </Menu.Item>
              <Menu.Item key="2">
                <Link to="todolist">todolist案例</Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Link to="usermedia">用户媒体数据</Link>
              </Menu.Item>
            </Menu>

          </Header>
          <Layout>
            <Sider width={200} className="site-layout-background">
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%', borderRight: 0 }}
              >
                <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
                  <Menu.Item key="1">option1</Menu.Item>
                  <Menu.Item key="2">option2</Menu.Item>
                  <Menu.Item key="3">option3</Menu.Item>
                  <Menu.Item key="4">option4</Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
                  <Menu.Item key="5">option5</Menu.Item>
                  <Menu.Item key="6">option6</Menu.Item>
                  <Menu.Item key="7">option7</Menu.Item>
                  <Menu.Item key="8">option8</Menu.Item>
                </SubMenu>
                <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                  <Menu.Item key="9">option9</Menu.Item>
                  <Menu.Item key="10">option10</Menu.Item>
                  <Menu.Item key="11">option11</Menu.Item>
                  <Menu.Item key="12">option12</Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Layout style={{ padding: '0 24px 24px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>主页</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
              </Breadcrumb>
              <Content
                className="site-layout-background"
                style={{
                  padding: 24,
                  margin: 0,
                  minHeight: 280,
                }}
              >

                <Routes>
                  <Route path="/" element={<UserInfo />} />,
                  <Route path="user" element={<UserInfo />} />,
                  <Route path="todolist" element={<TodoList />} />,
                  <Route path="usermedia" element={<UserMedia />} />,

                </Routes>

              </Content>
            </Layout>
          </Layout>
        </Layout>

      </HashRouter>

    </div>
  );
}

export default App;
